<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 中医智能诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A5568',
                        secondary: '#718096'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <div class="w-[1440px] mx-auto p-6">
        <!-- 导航栏 -->
        <nav class="bg-white p-4 mb-6 shadow-md rounded-lg">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold">中医智能诊断系统</a>
                <div class="flex gap-4">
                    <a href="舌诊AI分析.html" class="text-gray-600">舌诊AI分析</a>
                    <a href="体质评分系统.html" class="text-gray-600">体质评分系统</a>
                    <a href="健康数据监测.html" class="text-gray-600">健康数据监测</a>
                    <a href="产后关怀专区.html" class="text-gray-600">产后关怀专区</a>
                    <a href="个人中心.html" class="text-primary font-bold">个人中心</a>
                    <a href="会员订阅.html" class="text-gray-600">会员订阅</a>
                </div>
            </div>
        </nav>
        
        <!-- 个人中心模块 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
            <!-- 个人资料 -->
            <div class="flex items-center justify-between mb-8">
                <div class="flex items-center gap-4">
                    <div class="relative">
                        <img src="https://ai-public.mastergo.com/ai/img_res/5fa6ef1076a3bc0e5d2e2cdd978d6854.jpg" class="w-20 h-20 rounded-full object-cover">
                        <button id="change-avatar-btn" class="absolute -bottom-1 -right-1 bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center">
                            <i class="fas fa-camera"></i>
                        </button>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold">王梦琪</h2>
                        <div class="flex items-center gap-2 text-gray-600">
                            <span class="bg-primary bg-opacity-10 text-primary text-xs px-2 py-1 rounded-full">高级会员</span>
                            <span class="text-sm">会员到期：2024-12-31</span>
                        </div>
                    </div>
                </div>
                <button id="edit-profile-btn" class="bg-primary text-white px-4 py-2 !rounded-button">
                    <i class="fas fa-edit mr-2"></i>编辑资料
                </button>
            </div>
            
            <!-- 功能标签 -->
            <div class="flex border-b mb-6">
                <button class="px-6 py-3 border-b-2 border-primary text-primary font-medium tab-btn active" data-tab="profile-tab">个人资料</button>
                <button class="px-6 py-3 text-gray-600 tab-btn" data-tab="privacy-tab">隐私设置</button>
                <button class="px-6 py-3 text-gray-600 tab-btn" data-tab="invite-tab">邀请好友</button>
                <button class="px-6 py-3 text-gray-600 tab-btn" data-tab="history-tab">历史记录</button>
            </div>
            
            <!-- 个人资料内容 -->
            <div id="profile-tab" class="tab-content">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4">基本信息</h3>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">王梦琪</div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">女</div>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">1990-05-15</div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">138****6789</div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                                <div class="p-3 bg-gray-50 rounded-lg">wang****@example.com</div>
                            </div>
                        </div>
                        
                        <h3 class="text-lg font-bold mb-4 mt-6">健康信息</h3>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">身高</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">165 cm</div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">体重</label>
                                    <div class="p-3 bg-gray-50 rounded-lg">55 kg</div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">主要健康问题</label>
                                <div class="p-3 bg-gray-50 rounded-lg">偶尔失眠、肩颈酸痛</div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">药物过敏史</label>
                                <div class="p-3 bg-gray-50 rounded-lg">无</div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">体质分析</h3>
                        <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-medium">主要体质类型</span>
                                <span class="text-primary">气虚质</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full" style="width: 80%"></div>
                            </div>
                            <p class="text-sm text-gray-600 mt-2">上次检测时间：2024-01-15</p>
                            <button class="mt-4 text-primary text-sm flex items-center">
                                <i class="fas fa-redo mr-1"></i>重新检测
                            </button>
                        </div>
                        
                        <h3 class="text-lg font-bold mb-4">账户信息</h3>
                        <div class="space-y-4">
                            <div class="p-4 bg-gray-50 rounded-lg">
                                <div class="flex justify-between items-center">
                                    <span class="font-medium">会员等级</span>
                                    <span class="text-primary">高级会员</span>
                                </div>
                                <div class="mt-1 text-sm text-gray-600">享受全部功能和专属客服</div>
                                <button class="mt-2 text-primary text-sm flex items-center">
                                    <i class="fas fa-crown mr-1"></i>管理订阅
                                </button>
                            </div>
                            
                            <div class="p-4 bg-gray-50 rounded-lg">
                                <div class="flex justify-between items-center">
                                    <span class="font-medium">积分</span>
                                    <span class="text-primary">520</span>
                                </div>
                                <div class="mt-1 text-sm text-gray-600">可兑换礼品或购买会员</div>
                                <button class="mt-2 text-primary text-sm flex items-center">
                                    <i class="fas fa-exchange-alt mr-1"></i>兑换礼品
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 隐私设置内容 -->
            <div id="privacy-tab" class="tab-content hidden">
                <div class="max-w-3xl mx-auto">
                    <h3 class="text-lg font-bold mb-6">隐私设置</h3>
                    
                    <div class="space-y-6">
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <h4 class="font-medium mb-4">数据访问控制</h4>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-shield-alt text-primary"></i>
                                        <span>允许系统收集使用数据用于健康分析</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer privacy-toggle" id="data-collection" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                    </label>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-cloud-upload-alt text-primary"></i>
                                        <span>允许上传数据到云端进行备份</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer privacy-toggle" id="cloud-backup" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                    </label>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-share-alt text-primary"></i>
                                        <span>允许匿名共享数据用于科研目的</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer privacy-toggle" id="share-data">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <h4 class="font-medium mb-4">设备授权管理</h4>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-mobile-alt text-primary"></i>
                                        <div>
                                            <span class="block">iPhone 13 Pro</span>
                                            <span class="text-xs text-gray-500">上次登录: 今天 10:30</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">当前设备</span>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-laptop text-primary"></i>
                                        <div>
                                            <span class="block">MacBook Pro</span>
                                            <span class="text-xs text-gray-500">上次登录: 2024-01-20</span>
                                        </div>
                                    </div>
                                    <button class="text-red-500 text-sm device-revoke-btn">
                                        <i class="fas fa-times-circle mr-1"></i>撤销授权
                                    </button>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-tablet-alt text-primary"></i>
                                        <div>
                                            <span class="block">iPad Air</span>
                                            <span class="text-xs text-gray-500">上次登录: 2024-01-15</span>
                                        </div>
                                    </div>
                                    <button class="text-red-500 text-sm device-revoke-btn">
                                        <i class="fas fa-times-circle mr-1"></i>撤销授权
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <h4 class="font-medium mb-4">账户安全</h4>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-lock text-primary"></i>
                                        <span>修改密码</span>
                                    </div>
                                    <button class="text-primary text-sm" id="change-password-btn">
                                        <i class="fas fa-edit mr-1"></i>修改
                                    </button>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-mobile-alt text-primary"></i>
                                        <span>两步验证</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer privacy-toggle" id="two-factor" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                    </label>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-bell text-primary"></i>
                                        <span>登录通知</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer privacy-toggle" id="login-notify" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex justify-end">
                            <button id="save-privacy-btn" class="bg-primary text-white px-6 py-2 rounded-lg !rounded-button">
                                保存设置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 邀请好友内容 -->
            <div id="invite-tab" class="tab-content hidden">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4">邀请好友</h3>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="text-center mb-6">
                                <i class="fas fa-gift text-primary text-4xl mb-3"></i>
                                <p class="text-lg font-bold mb-2">邀请好友，双方各得30积分</p>
                                <p class="text-gray-600">积分可用于兑换会员或健康产品</p>
                            </div>
                            
                            <div class="bg-white p-4 rounded-lg mb-6">
                                <p class="text-center font-bold mb-2">您的专属邀请码</p>
                                <div class="flex items-center justify-center gap-2 mb-2">
                                    <span class="text-2xl font-mono tracking-wider">HEALTH2024</span>
                                    <button id="copy-code-btn" class="text-primary">
                                        <i class="far fa-copy"></i>
                                    </button>
                                </div>
                                <p class="text-center text-sm text-gray-500">有效期至：2024-12-31</p>
                            </div>
                            
                            <div class="space-y-4">
                                <button class="w-full bg-primary text-white py-3 rounded-lg flex items-center justify-center gap-2 !rounded-button" id="share-wechat-btn">
                                    <i class="fab fa-weixin"></i>
                                    分享到微信
                                </button>
                                
                                <button class="w-full bg-white border border-gray-200 text-gray-700 py-3 rounded-lg flex items-center justify-center gap-2 !rounded-button" id="share-link-btn">
                                    <i class="fas fa-link"></i>
                                    复制邀请链接
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">邀请记录</h3>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-center justify-between mb-4">
                                <span class="font-medium">已成功邀请 <span class="text-primary">2</span> 位好友</span>
                                <span class="text-primary">累计获得 <span class="font-bold">60</span> 积分</span>
                            </div>
                            
                            <div class="space-y-4">
                                <div class="bg-white p-4 rounded-lg">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <img src="https://ai-public.mastergo.com/ai/img_res/5fa6ef1076a3bc0e5d2e2cdd978d6854.jpg" class="w-10 h-10 rounded-full object-cover">
                                            <div>
                                                <p class="font-medium">李雯雯</p>
                                                <p class="text-xs text-gray-500">注册时间：2024-01-15</p>
                                            </div>
                                        </div>
                                        <span class="text-primary">+30积分</span>
                                    </div>
                                </div>
                                
                                <div class="bg-white p-4 rounded-lg">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <img src="https://ai-public.mastergo.com/ai/img_res/5fa6ef1076a3bc0e5d2e2cdd978d6854.jpg" class="w-10 h-10 rounded-full object-cover">
                                            <div>
                                                <p class="font-medium">张晓芳</p>
                                                <p class="text-xs text-gray-500">注册时间：2024-01-12</p>
                                            </div>
                                        </div>
                                        <span class="text-primary">+30积分</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-primary bg-opacity-5 p-4 rounded-lg mt-6">
                                <h4 class="font-medium mb-2">邀请规则</h4>
                                <ul class="text-sm text-gray-600 space-y-1">
                                    <li>• 每成功邀请1位好友注册并完成体质测试，双方各获得30积分</li>
                                    <li>• 被邀请人需在注册时输入您的邀请码</li>
                                    <li>• 邀请奖励将在24小时内发放到账户</li>
                                    <li>• 积分可在"个人中心-积分商城"中使用</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 历史记录内容 -->
            <div id="history-tab" class="tab-content hidden">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-bold">历史记录</h3>
                    <div class="flex gap-4">
                        <select class="p-2 border border-gray-200 rounded-lg">
                            <option>全部记录</option>
                            <option>舌诊记录</option>
                            <option>体质评估</option>
                            <option>健康监测</option>
                        </select>
                        <input type="date" class="p-2 border border-gray-200 rounded-lg">
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">舌诊AI分析</span>
                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">舌诊记录</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">舌质淡红，舌体适中，舌苔薄白，显示脾胃功能正常。</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-gray-500">2024-01-20 10:30</p>
                                <button class="text-primary text-sm mt-1">查看详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">体质评分检测</span>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">体质评估</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">气虚质偏向，建议注意调理。</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-gray-500">2024-01-15 16:45</p>
                                <button class="text-primary text-sm mt-1">查看详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">睡眠质量监测</span>
                                    <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">健康监测</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">平均睡眠时长7.5小时，深度睡眠2.3小时。</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-gray-500">2024-01-10 08:15</p>
                                <button class="text-primary text-sm mt-1">查看详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">情绪变化分析</span>
                                    <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">健康监测</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">近期情绪稳定，心态较为平和。</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-gray-500">2024-01-05 14:20</p>
                                <button class="text-primary text-sm mt-1">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-center">
                    <nav class="inline-flex rounded-md shadow">
                        <a href="#" class="px-3 py-2 bg-primary text-white rounded-l-md">1</a>
                        <a href="#" class="px-3 py-2 bg-white text-gray-700 border-t border-b border-r border-gray-200">2</a>
                        <a href="#" class="px-3 py-2 bg-white text-gray-700 border-t border-b border-r border-gray-200">3</a>
                        <a href="#" class="px-3 py-2 bg-white text-gray-700 rounded-r-md border border-gray-200">下一页</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑资料弹窗 -->
    <div id="edit-profile-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-3xl mx-auto mt-20 shadow-lg">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="text-xl font-bold">编辑个人资料</h3>
                <button id="close-edit-profile" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="profile-form">
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                            <input type="text" class="w-full p-3 border border-gray-300 rounded-lg" value="王梦琪">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                            <select class="w-full p-3 border border-gray-300 rounded-lg">
                                <option>男</option>
                                <option selected>女</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                            <input type="date" class="w-full p-3 border border-gray-300 rounded-lg" value="1990-05-15">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                            <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg" value="13812346789">
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                        <input type="email" class="w-full p-3 border border-gray-300 rounded-lg" value="wangmengqi@example.com">
                    </div>
                    
                    <h4 class="text-lg font-medium mb-4">健康信息</h4>
                    
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">身高 (cm)</label>
                            <input type="number" class="w-full p-3 border border-gray-300 rounded-lg" value="165">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">体重 (kg)</label>
                            <input type="number" class="w-full p-3 border border-gray-300 rounded-lg" value="55">
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">主要健康问题</label>
                        <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="2">偶尔失眠、肩颈酸痛</textarea>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">药物过敏史</label>
                        <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="2">无</textarea>
                    </div>
                    
                    <div class="flex justify-end gap-4">
                        <button type="button" id="cancel-edit" class="px-6 py-2 border border-gray-300 rounded-lg">取消</button>
                        <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="bg-white rounded-lg w-full max-w-md mx-auto mt-20 shadow-lg">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="text-xl font-bold">修改密码</h3>
                <button id="close-change-password" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="password-form">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="请输入当前密码">
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="请输入新密码">
                        <p class="text-xs text-gray-500 mt-1">密码必须包含字母、数字和特殊字符，且长度不少于8位</p>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="请再次输入新密码">
                    </div>
                    
                    <div class="flex justify-end gap-4">
                        <button type="button" id="cancel-password" class="px-6 py-2 border border-gray-300 rounded-lg">取消</button>
                        <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 通知提示框 -->
    <div id="notification" class="fixed top-4 right-4 bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50">
        <div class="flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            <span id="notification-message">操作成功</span>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('.tab-btn').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.tab-btn').forEach(btn => {
                    btn.classList.remove('border-b-2', 'border-primary', 'text-primary', 'active');
                    btn.classList.add('text-gray-600');
                });
                
                // 添加当前标签的激活状态
                this.classList.remove('text-gray-600');
                this.classList.add('border-b-2', 'border-primary', 'text-primary', 'active');
                
                // 隐藏所有内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });
                
                // 显示当前标签内容
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.remove('hidden');
            });
        });
        
        // 编辑资料弹窗
        const editProfileModal = document.getElementById('edit-profile-modal');
        document.getElementById('edit-profile-btn').addEventListener('click', function() {
            editProfileModal.classList.remove('hidden');
        });
        
        document.getElementById('close-edit-profile').addEventListener('click', function() {
            editProfileModal.classList.add('hidden');
        });
        
        document.getElementById('cancel-edit').addEventListener('click', function() {
            editProfileModal.classList.add('hidden');
        });
        
        // 修改密码弹窗
        const changePasswordModal = document.getElementById('change-password-modal');
        document.getElementById('change-password-btn').addEventListener('click', function() {
            changePasswordModal.classList.remove('hidden');
        });
        
        document.getElementById('close-change-password').addEventListener('click', function() {
            changePasswordModal.classList.add('hidden');
        });
        
        document.getElementById('cancel-password').addEventListener('click', function() {
            changePasswordModal.classList.add('hidden');
        });
        
        // 表单提交处理
        document.getElementById('profile-form').addEventListener('submit', function(e) {
            e.preventDefault();
            editProfileModal.classList.add('hidden');
            showNotification('个人资料更新成功');
        });
        
        document.getElementById('password-form').addEventListener('submit', function(e) {
            e.preventDefault();
            changePasswordModal.classList.add('hidden');
            showNotification('密码修改成功');
        });
        
        // 隐私设置保存
        document.getElementById('save-privacy-btn').addEventListener('click', function() {
            showNotification('隐私设置已保存');
        });
        
        // 撤销设备授权
        document.querySelectorAll('.device-revoke-btn').forEach(button => {
            button.addEventListener('click', function() {
                const deviceElement = this.closest('div.flex.items-center.justify-between');
                deviceElement.classList.add('line-through', 'text-gray-400');
                this.textContent = '已撤销';
                this.classList.remove('text-red-500');
                this.classList.add('text-gray-400');
                this.disabled = true;
                
                showNotification('设备授权已撤销');
            });
        });
        
        // 复制邀请码
        document.getElementById('copy-code-btn').addEventListener('click', function() {
            const code = "HEALTH2024";
            navigator.clipboard.writeText(code).then(() => {
                showNotification('邀请码已复制到剪贴板');
            });
        });
        
        // 分享到微信
        document.getElementById('share-wechat-btn').addEventListener('click', function() {
            // 实际应用中应调用微信分享API
            showNotification('已打开微信分享');
        });
        
        // 复制邀请链接
        document.getElementById('share-link-btn').addEventListener('click', function() {
            const link = "https://example.com/invite?code=HEALTH2024";
            navigator.clipboard.writeText(link).then(() => {
                showNotification('邀请链接已复制到剪贴板');
            });
        });
        
        // 切换头像
        document.getElementById('change-avatar-btn').addEventListener('click', function() {
            // 实际应用中应打开文件选择器
            showNotification('头像更新功能即将上线');
        });
        
        // 显示通知提示
        function showNotification(message) {
            const notification = document.getElementById('notification');
            const notificationMessage = document.getElementById('notification-message');
            
            notificationMessage.textContent = message;
            notification.classList.remove('translate-x-full');
            
            setTimeout(() => {
                notification.classList.add('translate-x-full');
            }, 3000);
        }
    </script>
</body>
</html>